<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片转文字画</title>
        <style>
            html,
            body {
                height: 100%;
            }

            * {
                box-sizing: border-box;
            }

            body {
                margin: 0;
                padding: 50px 16px 16px;
            }

            p {
                margin: 0;
                line-height: 1;
            }

            .toolbar {
                position: absolute;
                top: 12px;
                left: 0;
                width: 100%;
                padding: 0 16px;
                display: flex;
                align-items: center;
            }

            .content {
                width: 900px;
				height: 100%;
				line-height: 1;
                font-size: 12px;
                font-family: sans-serif;
                font-weight: bold;
				user-select: none
            }

        </style>
    </head>
    <body>
        <div class="toolbar">
            <input type="file" id="file" accept="jpg,jpeg,gif,png">
            <span>填充：</span>
            <input type="text" id="text" value="▦">
            <span style="margin-left:10px">缩放比(空为自适应)：</span>
            <input type="number" style="width:60px" id="scale">
            <button id="btn" style="margin-left:20px">生成</button>
        </div>
        <canvas id="back" style="display:none"></canvas>
        <div id="front" class="content">
        </div>
		<script src="./dom-to-image.min.js"></script>
        <script>
            const file = document.getElementById('file');
            const text = document.getElementById('text');
            const scale = document.getElementById('scale');
            const btn = document.getElementById('btn');
            const back = document.getElementById('back');
            const front = document.getElementById('front');
            const backCtx = back.getContext('2d');

            function getScale(width, height) {
                if (scale.value) return Number(scale.value);
                const maxWidth = front.clientWidth;
                const maxHeight = front.clientHeight;
                return Math.ceil(Math.max(height * 12 / maxHeight, width * 12 / maxWidth))
            }

            function drawImage(frame) {
                const width = frame.width;
                const height = frame.height;
                const data = frame.data;
                const content = text.value || '▦';
                const tl = content.length;
                let tIdx = 0;
                let html = '<div id="target" style="display: inline-block">';
				let log = '%c';

                const n = getScale(width, height);
                for (let h = 0; h < height; h += n) {
                    //html += '<p>';
                    for (let w = 0; w < width; w += n) {
                        const i = (w + width * h) * 4;
                        let r = data[i + 0];
                        let g = data[i + 1];
                        let b = data[i + 2];
						let a = data[i + 3];
						const letter = a === 0 ? '&emsp;' : content[tIdx];
						
                        html += `<span style="color:rgba(${r}, ${g}, ${b}, ${a})">${letter}</span>`;
						log += (a === 0 ? ' ' : '#')
                    }
                    tIdx = tIdx === tl - 1 ? 0 : tIdx + 1;
                    html += '<br/>';
					log += '\n';
                }
				window.DB_LOG = log
				console.log(log, 'line-height:0.8;color:#10408f');
				html += '</div>';
                front.innerHTML = html
            }

            file.onchange = function (e) {
                const img = new Image();
                img.onload = function () {
                    backCtx.clearRect(0, 0, back.width, back.height);
                    back.style.width = img.width + 'px';
                    back.style.height = img.height + 'px';
                    back.width = img.width;
                    back.height = img.height;

                    backCtx.drawImage(img, 0, 0, img.width, img.height);
                }
                img.src = URL.createObjectURL(e.target.files[0])
            }

            btn.onclick = function () {
				btn.disabled = true;
                const frame = backCtx.getImageData(0, 0, back.width, back.height);
                drawImage(frame);
				
				setTimeout(function() {
					const target = document.getElementById('target');
					
					domtoimage.toPng(target)
						.then(function (dataUrl) {
							var img = new Image();
							img.src = dataUrl;
							front.innerHTML = '';
							front.appendChild(img);
						})
						.catch(function (error) {
							console.error('oops, something went wrong!', error);
						})
						.finally(function() {
							btn.disabled = false
						})
					
				}, 100)
            }
        </script>
    </body>
</html>
